<template>
  <div class="tab-selector">
    <el-tabs :value="value" @tab-click="handleTabClick">
      <el-tab-pane
        v-for="option in options"
        :key="option.value"
        :label="option.label"
        :name="option.value"
        :option="option"
      ></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: 'TabSelector',
  model: {
    prop: 'value',
    event: 'close',
  },
  props: {
    // 当前 value
    value: {
      type: String,
      default: ' ',
    },
    // 列表数据
    options: {
      type: Array,
      default: () => [],
      required: true,
    },
  },
  methods: {
    handleTabClick(tab) {
      this.$emit('change', tab.name)
      this.$emit('tab-change', tab.$attrs.option)
    },
  },
}
</script>

<style scoped>
.tab-selector {
  width: 100%;
  background-color: #ffffff;
}
</style>
